<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>06-systemInfoList</title>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/material-teal/easyui.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/admin/easyui/themes/color.css">
</head>
<body>
  <div class="container-fluid">
    <br>
    <h3>公告记录</h3>
    <hr>
    <div class="">
      <table id="dg" class="easyui-datagrid" style="width:100%;height:460px;"
        data-options="rownumbers:true,pagination:true,singleSelect:true,
        url:'${pageContext.request.contextPath}/systemInfo?method=getInfoListForEasyUI',
        method:'post',fitColumns:true,toolbar:'#toolbar',striped:true">
        <thead>
           <tr>
            <th scope="col" data-options="field:'title',width:100">标题</th>
            <th scope="col" data-options="field:'username',width:100">发布者</th>
            <th scope="col" data-options="field:'datetime',width:100">发布时间</th>
          </tr> 
        </thead>
      </table>
    </div>
    <!-- 添加,编辑,移除按钮 -->
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton newInfoCls" data-options="iconCls:'icon-add',plain:true" onclick="newInfo()">添加公告</a>
        <a href="javascript:void(0)" class="easyui-linkbutton detailInfoCls" data-options="iconCls:'icon-edit',plain:true" onclick="detailInfo()">公告详情</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="destroyInfo()">移除公告</a>
    </div>
  </div><!-- container-fluid -->

  <!-- Modal : issueNewInfoModal -->
  <div class="modal fade" id="issueNewInfoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">发布公告</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form method="post" id="issueForm" class="easyui-form">
            <input type="text" class="form-control" name="rid" id="rid" value="${root.rid}" style="display:none;">
            <div class="form-group row">
              <label for="forAddTitle" class="col-sm-2 col-form-label">标题</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="forAddTitle" name="title" required maxLength="20" placeholder="最好别超过20字">
              </div>
            </div>
            <div class="form-group row">
              <label for="forAddDetail" class="col-sm-2 col-form-label">内容</label>
              <div class="col-sm-10">
                <textarea id="forAddDetail" class="form-control" rows="6" name="infoDetail" required></textarea>
              </div>
            </div>
		        <div class="modal-footer">
		          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
		          <button type="submit" class="btn btn-primary saveInfoBtnCls" onclick="saveInfo()">发布</button>
		        </div><!-- modal-footer -->
          </form>
        </div><!-- modal-body -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal fade -->

  <!-- Modal : showSystemInfoDetail -->
  <div class="modal fade" id="showSystemInfoDetail" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">公告详情</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form action="" method="post" id="fm">
            <div class="form-group row">
              <label for="forShowTitle" class="col-sm-2 col-form-label text-center">标题</label>
              <div class="col-sm-10">
                <input type="text" class="form-control forShowTitle" id="forShowTitle" readonly>
              </div>
            </div>
            <div class="form-group row">
              <label for="forShowDetail" class="col-sm-2 col-form-label text-center">内容</label>
              <div class="col-sm-10">
                <textarea id="forShowDetail" name="" class="form-control forShowDetail" readonly rows="6"></textarea>
              </div>
            </div>
          </form>
        </div><!-- modal-body -->
      </div><!-- modal-content -->
    </div><!-- modal-dialog -->
  </div><!-- modal fade -->

  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap-4.2.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/admin/easyui/locale/easyui-lang-zh_CN.js"></script>
  
  <script type="text/javascript">
    // 发布新公告按钮
    function newInfo() {
    	$(".newInfoCls").attr( 'data-toggle','modal');
    	$(".newInfoCls").attr('data-target','#issueNewInfoModal');
      $(".saveInfoBtnCls").removeAttr('data-dismiss','modal');
      $('#issueForm').form('clear');
    }
    // 公告详情展示
    function detailInfo() {
      var row = $('#dg').datagrid('getSelected');
      if (row) {
	      $(".detailInfoCls").attr('data-toggle','modal');
	      $(".detailInfoCls").attr('data-target','#showSystemInfoDetail');
        $(".forShowTitle").val(row.title);
        $(".forShowDetail").val(row.infodetail);
      }
    }
    // 发布新公告
    function saveInfo() {
    	 if($("#forAddTitle").val()==""||$("#forAddTitle").val()==null||$("#forAddDetail").val()==""||$("#forAddDetail").val()==null){
           // alert("标题或内容不能为空！");
      }else{
          var rid = ${root.rid};
          var title = $("#forAddTitle").val();
          var infoDetail = $("#forAddDetail").val();
          $(".saveInfoBtnCls").attr( 'data-dismiss','modal'); 
          $.post(
        		  "/LostAndFound/systemInfo?method=handleAddSystemInfo",
        		  {
        			  "rid":rid,
        			  "title":title,
        			  "infoDetail":infoDetail
        		  },
        		  function(result){
        	        if (!result.success) {
        	            $.messager.show({
        	               title : 'Error',
        	               msg : "添加错误"
        	            });
        	        } else {
        	            $('#dg').datagrid('reload'); // reload the info data
        	        }
        		  },
        		  "json"
          );
      } 
    }
    // 移除公告
    function destroyInfo() {
      var row = $('#dg').datagrid('getSelected');
      if (row) {
        $.messager.confirm('Confirm',
            '确定删除此公告？',
            function(r) {
              if (r) {
                $.post('/LostAndFound/systemInfo?method=handleDeleteSystemInfoForEasyUI', {"infoid":row.infoid}, function(data) {
                  if (data.success) {
                    $('#dg').datagrid('reload'); // reload the info data in current page
                  } else {
                    $.messager.show({ // show error message
                      title : 'Error',
                      msg : "删除失败！"
                    });
                  }
                }, 'json');
              }
            });
      }
    }
  </script>
</body>
</html>